<template>
  <div class="deviceInfo-root">
    <formTitleVue
      title="设备情况统计"
    />
    <div class="select-ul">
      <el-cascader v-model="nowCascader" :options="cascader_options" @change="changeCascader"></el-cascader>
    </div>
    <div id="echarts-deviceInfo"></div>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myBarHorizontal from '@/components/Echarts/myBarHorizontal.vue';
import { api_deviceTypeFoldLine,api_cascader } from '@/api/jcfx/jcsjtj.js'
import echarts from "echarts";
import { setting } from '@/components/Echarts/setting.js'

export default {
  name: "deviceInfo",
  components: {
    formTitleVue,myBarHorizontal,
  },
  data() {
    return {
      selectOptions: [
        // {
        //   selectValue: "近一月",
        //   options:[
        //     { label: "近一月", value: "近一月" },
        //     { label: "近半年", value: "近半年" },
        //     { label: "近一年", value: "近一年" },
        //   ]
        // }
      ],
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        },
        yAxis: {
          data: []
        },
        grid: {
          left: '16%',
        },
      },
      searChForm: {
        bModeType: '',
        modeType: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
      cascader_options: [],
      nowCascader: [''],
    };
  },
  methods: {
    getData() {
      // console.log(this.searChForm)
      api_deviceTypeFoldLine(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        this.xData = data.xAxle
        this.netStateData = data.netStateData
        this.onlineRateData = data.onlineRateData
        this.statusData = data.statusData
        this.draw()
      })
    },
    // 获取级联数据下拉框
    getCascader(){
      api_cascader({type:'twoType'}).then(res => {
        // console.log(res)
        this.cascader_options = res.data
        return Promise.resolve()
      })
    },
    // 级联选择
    changeCascader(val){
      // console.log(val)
      this.searChForm.bModeType = val[0]||''
      this.searChForm.modeType = val[1]||''
      this.getData()
    },
    // 绘制图表
    draw(){
      let myChart = echarts.init(document.getElementById('echarts-deviceInfo'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: setting.bar_colorList,
        legend: {
          data: [],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          data: []
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            position: 'left',
            alignTicks: true,
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
            minInterval: 1,
          },
          {
            type: 'value',
            name: '在线率',
            position: 'right',
            alignTicks: true,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          
        ]
      };
      this.statusData.forEach(item => {
        option.legend.data.push(item.name)
        option.series.push({
          name: item.name,
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: item.report
        })
      })
      this.netStateData.forEach(item => {
        option.legend.data.push(item.name)
        option.series.push({
          name: item.name,
          type: 'line',
          yAxisIndex: 0,
          data: item.report
        })
      })
      this.onlineRateData.forEach(item => {
        option.legend.data.push(item.name)
        option.series.push({
          name: item.name,
          type: 'line',
          yAxisIndex: 1,
          data: item.report
        })
      })
      option.xAxis.data = this.xData
      myChart.setOption(option)
    },
  },
  async mounted() {
    // this.selectChange(this.selectOptions[0].selectValue)
    await this.getCascader()
    this.getData()
  },
};
</script>

<style lang="scss" scoped>
.deviceInfo-root {
  position: relative;
  #echarts-deviceInfo {
    height: 40vh;
  }
  .select-ul{
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 10;
  }
}
::v-deep .el-cascader{
  line-height: initial;
}
</style>
